<!--
  表具详情
-->
<template>
  <div class="meter-detail-wrap" :id="id">
    <detail-item :id="id+'-detail-item'" :columnNames="columnNames" :content="content" />
    <div class="show-detail-btn tc">
      <Button
        type="info"
        ghost
        size="small"
        :loading="meterAndUserInfoLoading"
        @click="handleMeterAndUserInfoClick"
        style="margin-right: 5px;"
        >表具详情</Button
      >
      <Button
        type="primary"
        ghost
        size="small"
        @click="handleUsegasDetailClick"
        style="margin-right: 5px;"
        >
        用气量详情
      </Button>
      <Button
        type="info"
        ghost
        size="small"
        :loading="lifeCycleLoading"
        @click="handleLifeCycleClick"
        >生命周期</Button
      >
    </div>

    <!-- 表具详情 -->
    <Modal
      v-model="showMeterAndUserInfo"
      :title="currentMeterId + ' 表具详情'"
      @on-cancel="handleMeterAndUserInfoClose"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div
        id="meterAndUserInfo"
        :is="userAndMeterInfoTpl"
        :currentMeterId="currentMeterId"
        :content="meterAndUserInfo"
      ></div>
      <div slot="footer">
        <Button @click="handleMeterAndUserInfoClose" ghost>关闭</Button>
      </div>
    </Modal>
    <!-- 用气量详情 -->
    <Modal
      v-model="showUsegasDetail"
      :title="currentMeterId + ' 用气量详情'"
      @on-cancel="handleUsegasClose"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div id="usegasDetail" :is="usegasTemp" :options="{meterId: currentMeterId, month: currentDate}"></div>
      <div slot="footer">
        <Button @click="handleUsegasClose" ghost>关闭</Button>
      </div>
    </Modal>
    <!-- 生命周期 -->
    <Modal
      v-model="showLifeCycle"
      :title="currentMeterId + ' 生命周期'"
      @on-cancel="handleLifeCycleCancel"
      width="96%"
      :styles="{ top: '30px', height: '85%' }"
    >
      <div id="lifeCycle" :is="lifeCycleTpl" :chartData="lifeCycleData" :fetchData="getLifeCycleData"></div>
      <div slot="footer">
        <Button @click="handleLifeCycleCancel" ghost>关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { each, merge, max, indexOf } from 'lodash'
import dayjs from 'dayjs'
import DetailItem from './components/DetailItem'
import { getMeterAndUserInfo, fetchLifeCycle } from '@/api/meterDetail'
import { eLineOptions } from './chartOptions'

export default {
  name: 'meterDetail',
  props: {
    id: {
      type: String,
      default: nanoid()
    },
    currentMeterId: String | Number,
    columnNames: Array,
    content: {
      type: Object,
      default: () => ({})
    },
    currentDate: String
  },
  components: {
    DetailItem,
    UserAndMeterDetailETree: () => import('@/commons/UserAndMeterDetailETree'),
    GasConsumptionDetail: () => import('@/commons/GasConsumptionDetail'),
    ELine: () => import('@/commons/charts/ELine')
  },
  data() {
    return {
      meterAndUserInfoLoading: false,
      showMeterAndUserInfo: false, // 表具详情弹框显示、隐藏
      userAndMeterInfoTpl: null, // 表具详情模板
      showUsegasDetail: false, // 用气量详情显示、隐藏
      usegasTemp: null, // 用气量详情模板
      meterAndUserInfo: null,
      showLifeCycle: false,
      lifeCycleTpl: null,
      lifeCycleLoading: false,
      lifeCycleData: null
    }
  },
  methods: {
    /**
     * desc: 关闭表具详情模态框
     * param {type}
     * return: void
     */

    handleUsegasClose() {
      this.showUsegasDetail = false
      this.usegasTemp = null
    },
    /**
     * desc: 关闭用气量详情模态框
     * param {type}
     * return: void
     */

    handleMeterAndUserInfoClose() {
      this.showMeterAndUserInfo = false
      this.userAndMeterInfoTpl = null
    },
    /**
     * desc: 表具详情按钮点击
     * param {type}
     * return: void
     */
    handleMeterAndUserInfoClick() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
      this.fetchMeterAndUserInfo()
    },
    /**
     * desc: 用气量详情
     * param {type}
     * return: void
     */
    handleUsegasDetailClick() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
      this.fetchUsegasDetail()
    },
    /**
     * desc: 请求表具详情信息
     * param {type}
     * return: void
     */
    async fetchMeterAndUserInfo() {
      this.meterAndUserInfoLoading = true
      const { code, date } = await getMeterAndUserInfo(this.currentMeterId)
      this.meterAndUserInfoLoading = false
      if (code === 200) {
        this.meterAndUserInfo = date
        this.userAndMeterInfoTpl = 'UserAndMeterDetailETree'
        this.showMeterAndUserInfo = true
      }
    },
    /**
     * desc: 请求用气量详情信息
     * param {type}
     * return: void
     */
    fetchUsegasDetail() {
      this.showUsegasDetail = true
      this.usegasTemp = 'GasConsumptionDetail'
    },
    handleLifeCycleClick() {
      if (!this.currentMeterId) {
        return this.$Notice.warning({
          title: '操作提示',
          desc: '没有可操作的数据'
        })
      }
      this.lifeCycleLoading = true
      this.showLifeCycle = true
      this.lifeCycleTpl = 'ELine'
    },
    async getLifeCycleData() {
      const { code, date } = await fetchLifeCycle({
        meterId: this.currentMeterId
      })
      this.lifeCycleLoading = false
      if (code === 200) {
        this.modifyLifeCycleData(date)
      }
    },
    modifyLifeCycleData(data = {}) {
      const { anomaly = [], weeklyCheck = [] } = data
      const _qsList = []
      const _ycList = []
      const _xAiaxList = []
      const _numArr = []
      each(anomaly, item => {
        const { abnormalRate, missRate, year, ...rest } = item
        _xAiaxList.push(year)
        _numArr.push(abnormalRate, missRate)
        _qsList.push({
          name: year,
          value: missRate,
          type: 'abnormalRate',
          ...rest
        })
        _ycList.push({
          name: year,
          value: abnormalRate,
          type: 'missRate',
          ...rest
        })
      })
      const _maxNum = max(_numArr)
      const { verMonthList, verSerList } = this.modifyVeriDate(weeklyCheck, _maxNum)
      this.lifeCycleData = merge({}, eLineOptions, {
        xAxis: [{
          type: 'category',
          data: _xAiaxList
        }, {
          show: false,
          type: 'category',
          data: verMonthList
        }],
        series: [
          {
            type: 'line',
            data: _qsList,
            symbolSize: 6
          },
          {
            type: 'line',
            data: _ycList,
            symbolSize: 6
          },
          ...verSerList
        ]
      })
    },
    /**
     * desc: 这里年份对应月份
     * param {*} arr
     * return {*}
     */
    modifyVeriDate(arr = [], maxNum) {
      const _yearArr = []
      const _verMonth = []
      each(arr, (item) => {
        const { startTime } = item
        _yearArr.push(dayjs(startTime).format('YYYY'))
        _verMonth.push(dayjs(startTime).format('YYYY-MM'))
      })
      const _monthArr = []
      each(_yearArr, (item) => {
        for (let i = 1; i < 13; i++) {
          let _m = i
          if (i < 10) {
            _m = `0${i}`
          }
          _monthArr.push(`${item}-${_m}`)
        }
      })
      const _verSerList = []
      each(_verMonth, (item) => {
        const _idx = indexOf(_monthArr, item)
        if (~_idx) {
          _verSerList.push({
            type: 'line',
            data: [[_idx, maxNum]],
            xAxisIndex: 1,
            symbol: 'triangle',
            symbolSize: 8,
            itemStyle: {
              color: '#ece80a'
            }
          })
        }
      })
      return {
        verMonthList: _monthArr,
        verSerList: _verSerList
      }
    },
    /**
     * desc: 关闭生命周期模态框
     * param {*}
     * return {*}
     */
    handleLifeCycleCancel() {
      this.showLifeCycle = false
      this.lifeCycleTpl = null
    }
  }
}
</script>
<style lang="less">
@import './index.less';
</style>
